<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>DOM操作</title>
		<style type="text/css">
			
		</style>
		<script>
			window.onload=function(){
				//获取父元素dl
				var myDl=document.getElementById("myDl");
				//1、添加
				//获取第一个按钮
				var oBtn1=document.getElementById("btn1");
				//给btn1添加单击事件
				oBtn1.onclick=function(){
					//创建一个dd元素节点
					var dd=document.createElement("dd");
					//创建一个文本节点，内容是灭绝师太
					var oText=document.createTextNode("灭绝师太");
					//将文本节点添加到创建的dd节点中，相当于<dd>灭绝师太</dd>
					dd.appendChild(oText);
					//再将创建好的dd添加到dl列表中
					myDl.appendChild(dd);		
				}
				//2、插入
				var oBtn2=document.getElementById("btn2");
				oBtn2.onclick=function(){
					//创建一个dd元素节点
					var dd=document.createElement("dd");
					//创建一个文本节点，内容是周芷若
					var oText=document.createTextNode("周芷若");
					//将文本节点添加到创建的dd节点中，相当于<dd>周芷若</dd>
					dd.appendChild(oText);
					//获取id="zsf"的元素
					var zsf=document.getElementById("zsf");
					//将"周芷若"插入到"张三丰"之前，父.insertBefore(新节点,旧节点)
					myDl.insertBefore(dd,zsf);	
				}
				//3、替换
				var oBtn3=document.getElementById("btn3");
				oBtn3.onclick=function(){
					//创建一个li元素节点
					var dd=document.createElement("dd");
					//创建一个文本节点，内容是杨逍
					var oText=document.createTextNode("杨逍");
					//将文本节点添加到创建的dd节点中，相当于<dd>杨逍</dd>
					dd.appendChild(oText);
					//获取id="zcs"的元素
					var zcs=document.getElementById("zcs");
					//用"杨逍"替换"张翠山"，父.replaceChild(新节点,旧节点)
					myDl.replaceChild(dd,zcs);	
				}
				//4、删除
				var oBtn4=document.getElementById("btn4");
				oBtn4.onclick=function(){
					//获取id="zwj"的元素
					var zwj=document.getElementById("zwj");
					//删除"张无忌",父.removeChild(子节点)
					myDl.removeChild(zwj);	
				}
			}
		</script>
	</head>
	<body>
		<dl id="myDl">
			<dt>姓名列表：</dt>
			<dd id="zwj">张无忌</dd>
			<dd id="zsf">张三丰</dd>
			<dd id="zcs">张翠山</dd>
		</dl><br /><br />
		<button id="btn1">将"灭绝师太"添加到ul列表中</button><br /><br />
		<button id="btn2">将"周芷若"插入到"张三丰"前</button><br /><br />
		<button id="btn3">用"杨逍"替换"张翠山"</button><br /><br />
		<button id="btn4">删除"张无忌"</button>
	</body>
</html>
